<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import ParentAsinSelect from '@/components/ParentAsinSelect/index.vue';
import { ProductVO } from '@/api/product/product/types';

const props = defineProps<{
  modelValue?: string | number;
  name?: string;
  productType: string | number;
  multiple: boolean;
}>();
const emit = defineEmits(['update:modelValue', 'update:name']);
const data = useVModel(props, 'modelValue', emit);
const name = useVModel(props, 'name', emit);
const parentAsinSelectRef = ref<InstanceType<typeof ParentAsinSelect>>();

const open = () => {
  parentAsinSelectRef.value.open();
};

const callBack = (product?: ProductVO[]) => {
  if (!product || product.length === 0) {
    return;
  }
  if (product && product.length > 0) {
    name.value = product.map((item) => item.asin).join(',');
    nextTick(() => {
      console.log('DOM updated with new name value:', name.value);
    });
  }
  // data.value = product[0].asin;
  // name.value = product[0].productName;
};

const clearName = () => {
  if (data.value) {
    data.value = '';
    name.value = '';
  }
};
</script>

<template>
  <el-input v-bind="$attrs" v-model="name" readonly @click="open">
    <template #append>
      <div style="cursor: pointer" @click="clearName">清空</div>
    </template>
  </el-input>
  <parent-asin-select ref="parentAsinSelectRef" :product-type="productType" :multiple="multiple" @confirm-call-back="callBack"></parent-asin-select>
</template>

<style scoped lang="scss"></style>
